<template>
  <div>
    <p>{{msg}}</p>
    <div v-if="flag">
      <span>查询日期范围:</span><input type="text" maxlength="16" v-model="formData.startDate" class="in">
      <span>到</span><input type="text" v-model="formData.endDate" class="in">
      <input type="button" value="查询" @click="search()">
    </div>
    <div>
      <table v-show="tableShow">
        <tr>
          <td>交易日期</td>
          <td>支出/存入</td>
          <td>账户余额</td>
          <td>交易类型</td>
          <td>备注</td>
        </tr>
        <tr v-for="(item,index) in page.records" class="tableDate">
<!--          去掉数据库中日期的T，并截取到.之前-->
          <td>{{item.transactionDate.substring(0,item.transactionDate.indexOf('.')).replace('T',' ')}}</td>
<!--          存入时显示+-->
          <td><span v-show="item.amount>0">+</span>{{item.amount}}</td>
<!--          保留两位小数-->
          <td>{{item.balance.toFixed(2)}}</td>
          <td>{{item.transactionType}}</td>
          <td>{{item.remark}}</td>
        </tr>

<!--        分页模块-->
        <tr>
          <!-- tr合并5列-->
          <td colspan="5">
            <a href="javascript:;" @click="firstPage()">首页|</a>
            <a href="javascript:;" @click="beforePage()"  v-show="this.page.current != 1">上一页|</a>
            <a href="javascript:;" @click="nextPage()"  v-show="this.page.current != this.page.pages">下一页|</a>
            <a href="javascript:;" @click="lastPage()">末页</a>第<span>{{page.current}}</span>页/共<span>{{page.pages}}</span>页({{page.total}}条记录)
          </td>
        </tr>
      </table>
      <p v-show="noRecords" id="noRecords">此时间范围内没有交易记录</p>
    </div>
  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "TransactionRecord",//交易记录
  data(){
    return {
      msg:'当前操作:查询交易记录。请选择时间范围后点“查询”按钮',
      formData:{},//表单数据
      flag:true,
      page:{
        current:1,
        size:4
      },//查询到的交易记录页面数据
      loginCardNo:'',//卡号
      tableShow:false,
      noRecords:false
    }
  },
  methods:{
    getPage(){
      instance.post('transactionRecord/page',{
        "loginCardNo":this.loginCardNo,
        "startDate":this.formData.startDate,
        "endDate":this.formData.endDate,
        "pageCurrent":this.page.current,
        "pageSize":this.page.size
      }).then(res=>{
        this.page = res.data;
      });
    },
    search(){
      let s = this.formData.startDate;
      let e = this.formData.endDate;
      let r = /^(\d{4})-(\d{2})-(\d{2})$/;//正则表达式验证YYYY-MM-DD日期格式
      if (Object.keys(this.formData).length <2){//非空验证 表单属性必须大于等于2种
        alert('两个日期均为必填项');
      }
      else if (
         !r.test(s) ||
         !r.test(e)
       ){//日期格式验证
        alert('格式为“年-月-日”');
      }
      else {
        this.getPage();
        if (this.page.records == 0){
          this.tableShow = false;
          this.noRecords = true;
        }else {
          this.tableShow = true;
          this.noRecords = false;
        }
      }
    },
    firstPage(){
      this.page.current = 1;
      this.getPage();
    },
    beforePage(){
      if (this.page.current>1){
        this.page.current -= 1;
        this.getPage();
      }
    },
    nextPage(){
      if (this.page.current<this.page.pages){
        this.page.current += 1;
        this.getPage();
      }
    },
    lastPage(){
      this.page.current = this.page.pages;
      this.getPage()
    }
  },
  created() {
    this.loginCardNo = this.$route.params.cardno;//路由接收值
    if (typeof this.loginCardNo === 'undefined'){//未登录
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
div{
  margin-top: 10px;
  /*黑体*/
  font-family:SimHei;
}
p{
  font-weight: bold;
}
.in{
  width: 140px;
}
table{
  margin: auto;
  border: 1px solid;
  border-collapse: collapse;
}
td{
  border: 1px solid;
}
/*第一行*/
table>tr:first-child{
  background: lightskyblue;
  font-weight: bold;
}
tr>td:first-child{
  width: 160px;
}
tr>td:nth-child(2){
  width: 80px;
}
tr>td:nth-child(3){
  width: 70px;
}
tr>td:nth-child(4){
  width: 70px;
}
tr>td:nth-child(5){
  width: 170px;
}
#noRecords{
  margin-top: 50px;
}
.tableDate:nth-child(odd){
  /*奇数行背景色*/
  background: lightgreen;
}
</style>
